<template>
  <div>
    <ul class="list" ref="UI_">
      <li v-for="(item,index) in routeList" ><a href="javascript:;" @click="handleSelect(index,$event)">{{item.meta.title}}</a></li>
    </ul>

    <el-row :gutter="20" class="ccontainer">
      <el-col :span="4">
        <mainItem :list="childList"></mainItem>
      </el-col>
      <el-col :span="20">

      </el-col>
    </el-row>


  </div>
</template>

<script>
import mainItem from "./main-item"
export default {
  name:"main",
  data() {
    return {
      activeIndex: '1',
      childList:[],
      routeList:[]
    };
  },
  components:{
    mainItem
  },
  created() {
    console.log(this.$router.options.routes)

   this.routeList=this.$router.options.routes;
  },
  mounted() {
    let refB = sessionStorage.getItem('refB')
    if(refB||refB==0) {
      let li = this.$refs.UI_.children[refB]
      this.ElementCelar(this.$refs.UI_.children)
      li.children[0].style.color = '#fff'
      li.children[0].style.borderBottom = '2px solid #fff'
    }
    if(sessionStorage.getItem('childList')){
      this.childList=JSON.parse(sessionStorage.getItem('childList'))
      console.log(this.childList)
    }
    if(sessionStorage.getItem('index')){
      this.activeIndex=sessionStorage.getItem('index')

    }
  },
  methods: {
    ElementCelar (liEleF){
      for(let i in liEleF) {
        if(Number(i).toString()!='NaN'){
          liEleF[i].style.background = 'transparent'
          liEleF[i].children[0].style.color = 'rgba(255, 255, 255, .7)'
          liEleF[i].children[0].style.borderBottom = 'none'
        }
      }
    },
    handleSelect(key,e) {
      let liEleF = e.target.parentElement.parentElement.children
      this.ElementCelar(liEleF)
      for(let i in liEleF) {
        if(Number(i).toString()!='NaN'){
          if(liEleF[i]==e.target.parentElement) {
            sessionStorage.setItem('refB', i)
          }
        }
      }
      e.target.style.color = '#fff'
      e.target.style.borderBottom = '2px solid #fff'
      // this.$router.push({path:this.routeList[key-1].path})
      console.log(this.routeList[key])
      this.childList=this.routeList[key].children;
      sessionStorage.setItem('childList',JSON.stringify(this.childList))
      console.log(this.childList)
      sessionStorage.setItem('index',key)

    }
  }
}
</script>

<style scoped>
.ccontainer{
  position: fixed;
  left:0;
  right: 0;
  top:40px;
}
  .list{
    padding:0;
    margin:0;
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width:100%;
    background: #008CD6;
    position: fixed;
    top:0;
    left:0;
    right: 0;
  }
  .list>li{

    padding: 0 20px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 16px;
    font-weight: 500;
    color: transparent;
    position: relative;
    text-align: center;
  }
  .list>li>a{
    color: rgba(255, 255, 255, .7);
    padding-bottom: 6px;
  // font-size: .9rem;
    text-decoration: none;
  }
  a:hover{
    cursor: pointer;
  }
</style>
